<template>
  <a-card :bordered="false">
    <div class="content">
      <div>
        <a-form style="max-width: 500px; margin: 40px auto 0;" :form="form" @submit="savedata">
          <a-form-item label="旧密码" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <a-input
              type="text"
              placeholder="请输入"
              v-decorator="['oldpwd',{rules:[{required:true,message:'请输入旧密码'}]}]"
            />
          </a-form-item>
          <a-form-item label="新密码" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <a-input
              type="password"
              placeholder="请输入"
              v-decorator="['pwd',{rules:[{required:true,message:'请输入新密码'}]}]"
            />
          </a-form-item>
          <a-form-item label="确认密码" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <a-input
              type="password"
              placeholder="再次输入密码"
              v-decorator="['fitpwd',{rules:[{required:true,message:'确认密码不可为空'}]}]"
            />
          </a-form-item>
          <a-form-item :wrapperCol="{span: 19, offset: 5}">
            <a-button type="primary" :loading="loadingStatus" :disabled="loadingStatus" html-type="submit">确认</a-button>
          </a-form-item>
        </a-form>
        <a-divider />
        <div class="step-form-style-desc">
          <h3>说明</h3>
          <p>修改账户登录密码，请谨慎设置。</p>
        </div>
      </div>
    </div>
  </a-card>
</template>

<script>
  import { ACCESS_TOKEN } from '@/store/mutation-types'
  import { mapGetters } from 'vuex'
  export default {
    name: 'data_user_edit_pwd',
    data() {
      return {
        token:this.$ls.get(ACCESS_TOKEN),
        labelCol: { lg: { span: 5 }, sm: { span: 5 } },
        wrapperCol: { lg: { span: 19 }, sm: { span: 19 } },
        currentTab: 0,
        // form
        form: this.$form.createForm(this),
        loadingStatus:false
      }
    },
    methods: {
      ...mapGetters([]),
      savedata(e) {
        e.preventDefault(e)
        this.form.validateFields((err, values) => {
          if (err) {
            for(let key in err){
              for(let item of err[key]['errors']) return this.$message.warning(item['message'],2);
            }
          }
          Object.assign(values,{token:this.token,id:this.id});
          this.loadingStatus = true;
          this.axios({
            method:'post',
            url:'/user/editPwd',
            data:values,
          }).then(res => {
            if(res.code == 0){
              this.form.resetFields();
              this.$message.success('修改成功',1);
            }else this.$message.warning(res.msg);
          }).catch(() => {
            this.$message.error('服务器发生错误...',2)
          }).finally(() => { this.loadingStatus = false; });
        });
      }
    }
  }
</script>

<style lang="less" scoped>
  .step-form-style-desc {
    padding: 0 56px;
    color: rgba(0, 0, 0, 0.45);

    h3 {
      margin: 0 0 12px;
      color: rgba(0, 0, 0, 0.45);
      font-size: 16px;
      line-height: 32px;
    }

    h4 {
      margin: 0 0 4px;
      color: rgba(0, 0, 0, 0.45);
      font-size: 14px;
      line-height: 22px;
    }

    p {
      margin-top: 0;
      margin-bottom: 12px;
      line-height: 22px;
    }
  }
</style>